<?php
$this->headTitle()->prepend($this->translate('about_news_description') . ' - ');;
$this->headLink()->appendStylesheet($this->APP_STATIC_SERVER . '/skins/admin/default/css/form.css');
$this->headScript()
        ->appendFile($this->APP_STATIC_SERVER . '/public/js/jquery.validate.js')
        ->appendFile($this->APP_STATIC_SERVER . '/public/js/tomato.util.js')
        ->appendFile($this->APP_STATIC_SERVER . '/public/js/tinymce/tiny_mce.js')
        ->appendFile($this->APP_STATIC_SERVER . '/public/js/jquery.json-2.3.min.js');
?>

<div id="r-heading">
    <img src="<?php echo $this->APP_STATIC_SERVER . '/skins/admin/default/images/article.png'; ?>" alt=""/>
    <span><?php echo $this->translate('task_edit_article')?></span>
</div>
<?php
$massage = $this->flashMessenger();
if ($massage) {
?>
    <div id="message"><?php echo $massage; ?></div>
<?php } ?>

<form id="frmEditArticle" class="" enctype="application/x-www-form-urlencoded" action="" method="post">
    <div class="r-left" style="width:60%; float:left;">
        <div class="row">
            <label for="title" class="required"><?php echo $this->translate('article_title') ?></label>
            <input class="text" type="text" name="title" id="title" value="<?php echo $this->article->title ?>" size="50" />
        </div>
        <div class="row">
            <label for="slug" class="required"><?php echo $this->translate('article_slug') ?></label>
            <input type="text" name="slug" id="slug" value="<?php echo $this->article->slug ?>" size="50" />
        </div>
        <div class="row">
            <label for="language"><?php echo $this->translate('article_language'); ?></label>
            <?php echo $this->languageSelector(array('name' => 'language', 'selected' => $this->article->language)); ?>
        </div>
        <div class="row">
            <label><?php echo $this->translate('article_source_item'); ?>:</label>
            <div class="translatable translationSourceItems">
						<?php
						echo $this->translatableArticle(array(
										'id'       => 'sourceItem',
										'name'     => 'sourceItem',
										'selected' => (null == $this->sourceArticle) ? null : $this->sourceArticle->id,
										'disabled' => null,
									), $this->article->language);
						?>
					</div>
        </div>
        <div class="row">
            <label for="summary"><?php echo $this->translate('article_summary') ?></label>
            <textarea style="width:323px;" name="summary" rows="24" cols="100"><?php echo $this->article->summary ?></textarea>
        </div>
        <div class="row">
            <label for="content" class="required"><?php echo $this->translate('article_content') ?></label>
            <textarea name="content" class="tinymce" id="content" rows="24" cols="100"><?php echo $this->article->content ?></textarea>
        </div>




    </div>
    <div class="r-right" style="width:35%;float:right;">
        <div class="box">
            <div class="b-title">
                <?php echo $this->translate('article_published') ?>
            </div>
            <div class="b-container">
                <div>
                    <label><?php echo $this->translate('article_category') ?></label>
                    <div class="translatable">
                            <?php
						echo $this->helperLoader('category')
                                            ->categorySelect(array(
                                                                    'id'       => 'category',
                                                                    'name'     => 'category_id',
                                                                    'selected' => $this->article->category_id,
                                                              ), $this->article->language, 'news');
						?>
                      </div>
                </div>
                <div>
                    <label><?php echo $this->translate('article_status') ?></label>
                    <select name="status">
                        <option value="inactived" <?php echo (($this->article->status == 'inactived') ? ' selected = "selected"' : '') ?> ><?php echo $this->translate('article_list_filter_inactived') ?></option>
                        <option value="actived" <?php echo (($this->article->status == 'actived') ? ' selected = "selected"' : '') ?>><?php echo $this->translate('article_list_filter_actived') ?></option>
                        <option value="drafted" <?php echo (($this->article->status == 'drafted') ? ' selected = "selected"' : '') ?>><?php echo $this->translate('article_list_filter_drafted') ?></option>
                    </select>
                </div>
                <div>
                    <label for="allow-comment"><?php echo $this->translate('article_allow_comment') ?></label>
                    <input id="allow-comment" type="checkbox" name="allow_comment" value="1" <?php echo (($this->article->allow_comment) ? ' checked = "checked"' : '') ?>/>
                </div>
                <div>
                    <label for="featured"><?php echo $this->translate('article_featured') ?></label>
                    <input id="featured" type="checkbox" name="featured" value="1" <?php echo (($this->article->featured) ? ' checked = "checked"' : '') ?>/>
                </div>
                <div>
                    <label for="author"><?php echo $this->translate('article_author') ?></label>
                    <input type="text" name="author" id="author" value="<?php echo $this->article->author ?>" size="30" />
                </div>
            </div>
        </div>
        <div class="box">
            <div class = "b-title">
                <?php echo $this->translate('article_multimedia'); ?>
            </div>        
            <div class="b-container">        
                <?php
                        echo
                        $this->helperLoader('upload')->uploader('news',
                                array('extension' => '*.jpg;*.jpeg;*.png;*.gif', 'fileExt' => '*.jpg;*.jpeg;*.png;*.gif', 'multi' => true, 'auto' => true, 'simUploadLimit' => 5, 'sizeLimit' => 1024 * 1024 * 5),
                                array('onComplete' => 'onUploadComplete'));
                ?>
            <div style="margin-top: 10px;" class="photos"><ul id="photos"></ul></div>
            </div>
        </div>
        <div class="box">
            <div class="b-title"><?php echo $this->translate('article_thumbnail')?></div>
            <div class="b-container">
                <input type ="hidden" value='<?php echo $this->articleImages ?>' name="articleImages" id="articleImages"/>
                <p><?php echo $this->translate('article_select_image_guide'); ?></p>
                <img src="<?php echo $this->article->image_thumbnail ?>" alt="Article Thumbnail" id="image-thumbnail"/>
            </div>
        </div>
        <div class="box">        
            <div class="b-title"><?php echo $this->translate('article_seo') ?></div>
            <div class="b-container">        
                <div>        
                    <label for="meta_title"><?php echo $this->translate('article_meta_title') ?></label>
                    <input type="text" name="meta_title" id="meta_title" value="<?php echo $this->article->meta_title ?>" size="50" />
                </div>        
                <div>        
                    <label for="meta_description"><?php echo $this->translate('article_meta_description') ?></label>
                    <textarea cols="38" rows="5" name="meta_description" id="meta_description"><?php echo $this->article->meta_description ?></textarea>
                </div>        
                <div>        
                    <label for="meta_keywords"><?php echo $this->translate('article_meta_keywords') ?></label>
                    <input type="text" name="meta_keywords" id="meta_keywords" value="<?php echo $this->article->meta_keywords ?>" size="50" />
                </div>        
            </div>        
        </div>        
        <div class="row" style="width:100%; clear: both;">        
            <input class="button" type="submit" name="submit" id="submit" value="<?php echo $this->translate('common_save') ?>" />
            <input class="button" type="reset" name="reset" id="reset" value="<?php echo $this->translate('common_reset') ?>" />
        </div>        
    </div>
</form>        
<script type="text/javascript">        
    $(document).ready(function(){
        /**
         * Validate form
         */
        $.validator.addMethod('slug', function(value) {
            var regex = new RegExp(/^[a-z0-9\-]+$/);
            if (value.match(regex)) {
                return true;
            } else {
                return false;
            }
        });
        $.validator.addMethod('value', function(value){
            return value != 0;
        });

        $('#frmEditArticle').validate({
            rules: {
                title: {
                    required: true,
                    maxlength: 255
                },
                slug: {
                    required: true,
                    slug: true,
                    maxlength: 255
                },
                content: {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                name: {
                    required: "<?php echo $this->translate('article_name_required'); ?>",
                    maxlength: "<?php echo $this->translate('article_name_maxlength'); ?>"
                },
                slug: {
                    required: "<?php echo $this->translate('article_slug_required'); ?>",
                    slug: "<?php echo $this->translate('article_slug_validate'); ?>",
                    maxlength: "<?php echo $this->translate('article_slug_maxlength'); ?>"
                },
                content: {
                    required: "<?php echo $this->translate('article_content_required'); ?>",
                    minlength: "<?php echo $this->translate('article_content_minlength'); ?>"
            },
            category_id: {
                value: "Xin hãy chọn chuyên mục"
            }
        }
    });
        
        
    //điền slug
    $("#title").change(function(){
        $('#slug').val(Tomato.Util.generateSlug($(this).val()));
    });
    /**
     * Init TinyMCE instances
     */
    tinyMCE.init({
        theme: 'advanced',
        theme_advanced_toolbar_location: 'top',
        theme_advanced_toolbar_align: 'left',
        width: '600',
        height: '225',
        mode: 'exact',
        elements: 'summary',
        relative_urls: false,
        remove_script_host: false
    });

    tinyMCE.init({
        theme: 'advanced',
        plugins: 'safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,preelementfix',
        theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo',
        theme_advanced_buttons3: 'link,unlink,anchor,image,cleanup,code,|,preview,|,forecolor,backcolor',
        theme_advanced_buttons4: 'tablecontrols,ltr,rtl,', //"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_toolbar_location: 'top',
        theme_advanced_toolbar_align: 'left',
        width: '600',
        height: '400',
        mode: 'exact',
        elements: 'content',
        relative_urls: false,
        remove_script_host: false,
        onchange_callback: function(editor) {
            tinyMCE.triggerSave();
            $('#' + editor.id).valid();
        }
    });

});
/**
 * Upload handlers
 */
function onUploadComplete(event, ID, fileObj, response, data) {
    var images = jQuery.parseJSON(response);
    var presentImage = $('<img/>');
    $(presentImage).attr('src', images.thumbnail.url)
    .attr('width', '100').attr('height', '100')
    .attr('style', 'cursor: pointer')
    .click(function() {
        selectImage(images);
    });
    var select = $('<select/>');
    $(select).attr('width', '100');
    $('<option/>').attr('value', '').html('---').appendTo(select);

    for (var thumb in images) {
        $('<option/>').attr('value', images[thumb].url).html(images[thumb].size).appendTo(select);
    }
    $(select).change(function() {
        if ($(this).val() != '') {
            insertImage($(this).val());
        }
    });

    $('<li/>').append(presentImage).append($('<br/>')).append(select).appendTo($('#photos'));
};
function selectImage(images) {
    var urls = {};
    for (var thumb in images) {
        urls[thumb] = images[thumb].url;
    }
    $('#articleImages').val($.toJSON(urls));
    $('#image-thumbnail').attr('src',images.thumbnail.url);
};

/**
 * Insert image to TinyMCE editor at current position
 * @param string url The image url
 */
function insertImage(url) {
    tinyMCE.getInstanceById('content').execCommand('mceInsertContent', false, '<img src="' + url + '" />');
};
</script>